
<template>
    <div class="exercise-page" >
        <div class="nav text-center"  :style="'padding-top:'+headPadding+'rpx'">练习</div> 
        <!-- topbar-->
        <div class="topbar-box">
            <div class="topbar">
              <scroll-view scroll-x="true">
                <div class="item" @click="sectionDataChange(item,index)" :class="item.selected == 1 ? 'active' : ''" v-for="(item,index) in sectionTitleList" :key="index">{{item.title}}</div>
              </scroll-view>
            </div>
        </div>

        <!--练习类型-->
        <div class="exercise-box">
            <div class="type-title">
                <div class="type-img">
                     <img :src="defaultSectionData.img_url" />
                 </div>
                 <div class="type-content">
                    <h3 class="type-content-title">{{defaultSectionData.title}}</h3>
                    <p class="number">订阅数: {{defaultSectionData.play_num + defaultSectionData.sys_play_num}}</p>
                    <p class="present">{{defaultSectionData.desc}}</p>
                 </div>
            </div>
            <div class="info">
                <h3 class="title">相关介绍</h3>
                <p class="info-msg" v-html="defaultSectionData.content"></p>
            </div>
        </div>

        <!--推荐视频-->
        <div class="recommend-video-box border-top">
            <h3 class="title">推荐视频</h3>
            <div class="recommend-video">
                <div class="video" v-for="(item,index) in defaultSectionData.recommends" :key="index" @click="clickSubject(item)"> 
                    <image-loader  :src="item.img_url"  image-style="width:332rpx;height:187rpx; border-radius:8rpx;" ></image-loader> 
                    <p class="video_text_info">{{item.title}}</p>
                </div>
            </div>
        </div>

        <!--学习目录-->
        <div class="list border-top">
            <h3 class="title">学习目录</h3>
            <div class="item" v-for="(item,index) in sectionSubjectListData" :key="index" @click="clickSubject(item)"> 
                <image-loader  :src="item.img_url"  image-style="margin-right: 20rpx; width:  238rpx; height: 134rpx; border-radius: 8rpx;" ></image-loader> 
                <div class="info">
                    <p class="content">{{item.title}}</p>
                    <p class="date">{{item.created_at}}</p>
                </div>
            </div>
        </div> 
        <!--立即订阅按钮-->
        <div class="btn" @click.sotp="subscribeBtn">立即订阅</div>

        <login-null v-if="loginNullShow" mode="modal" @close="closeModal"></login-null>
    </div>
</template>
<script>
import * as api from '@/utils/api' ;
import loginNull from '@/components/login-null.vue' 
const app = getApp()
export default {
    onLoad(){
        wx.showLoading({title:'加载中'})
        this.getSectionList();
    },
    onShow: function () {

    },

    data () {
        return {
            headPadding:wx.getStorageSync('headPadding'), 
            headHeight:wx.getStorageSync('headHeight'),
            loginNullShow:false, 
            page:1,
            is_load:true,
            sectionListData:[],
            sectionTitleList:[],
            defaultSectionData:[],
            sectionSubjectListData:[]
        }
    },

    components:{
        loginNull
    },
    //上拉刷新
        onReachBottom:function(){
          let vm = this;
          if(vm._data.is_load){
              console.log('下拉')
            vm.getSectionSubjectList()
          }
        },
    methods: {
        //获取课程分类
        getSectionList(){
            let vm = this;
            api.sectionList().then(res=>{
                if(res.data.code ==200){
                    vm._data.sectionListData = res.data.data;
                    vm._data.defaultSectionData = res.data.data[0];
                    let titleList = [];
                    res.data.data.forEach((element,index) => {
                        if(index == 0){
                            titleList.push({title:element.title,selected:1})
                        }else{
                            titleList.push({title:element.title,selected:0})
                        }
                    });
                    vm._data.sectionTitleList = titleList;
                    vm.getSectionSubjectList()
                }
            })
        },
        //获取课程分类下的课程列表
        getSectionSubjectList(){
            let vm = this;
            api.sectionSubjectList({id:vm.defaultSectionData.id,page:vm.page}).then(res=>{
                if(res.data.code ==200){
                if(vm._data.sectionSubjectListData.length>0){
                    vm._data.sectionSubjectListData = vm._data.sectionSubjectListData.concat(res.data.data)
                }else{
                    vm._data.sectionSubjectListData = res.data.data;
                }
                if(res.data.data.length == 0){
                    vm._data.is_load = false;
                }else{
                    vm._data.is_load = true;
                    vm._data.page = vm._data.page +1;
                }
                }
            })
        },
        sectionDataChange(item,index){
            let vm = this;
            wx.showLoading({title:'加载中'})
            //切换默认选中数据
            vm._data.defaultSectionData = vm._data.sectionListData[index];
            //切换顶部选择栏状态
            vm._data.sectionTitleList.forEach((element,key)=>{
                if(index == key){
                    element.selected = 1
                }else{
                    element.selected = 0;
                }
            })
            //重置page
            vm.page = 1;
            vm._data.sectionSubjectListData = [];
            //刷新课程列表
            this.getSectionSubjectList();
        },
        //点击课程
        clickSubject(item){
            wx.navigateTo({url:'../live/main?id='+item.id+'&section_id='+item.section_id})
        },
        //订阅
        subscribeBtn(){
            let vm = this;
            if(wx.getStorageSync('is_register')!=1){
                this.loginNullShow=true;
            }else{
                console.log('订阅');
            }
        },
        //关闭登录框
        closeModal(){
            this.loginNullShow=false;
        },
    },
}
</script>

<style lang="scss" scoped>
.exercise-page{
    width:100%;
    height:100%;
    color:#000;
    background: #fff;

    .nav{
        width: 100%;
        height: 162rpx;
    }

    //标题公共
    .title{
      margin-bottom: 32rpx;
      font-size: 36rpx;
      font-weight: bolder;
      color: #0E0E0E;
    }

    .topbar-box{
        width: 100%;
        height: 94rpx;
        padding-left: 33rpx;
        border-bottom: rgba(178,182,192,0.19) solid 1rpx;
        box-sizing: border-box;
        overflow: hidden;

        .topbar{
            width: 100%;
            height: 94rpx;
            display: inline-flex;
            white-space:nowrap;
            inline-height: 94rpx;

            .item{
                margin-right: 50rpx;
                height: 94rpx;
                line-height: 94rpx;
                font-size: 32rpx;
                font-weight: 500;
                color: #0E0E0E;
                display: inline-block;
            }
            .item.active{
                position:relative;
                color:#538EF2;
                font-size:40rpx;
            }
            .item.active:after{
              position: absolute;
              bottom: 10rpx;
              left: 50%;
              margin-left: -15%;
              width: 30%;
              height: 6rpx;
              background:linear-gradient(-35deg,rgba(83,142,242,1),rgba(77,106,235,1));
              content: ''
            }
        }
    }

    //练习类型
    .exercise-box{
        padding: 26rpx 33rpx;
        color:#333333;
        font-size: 28rpx;
        
        .type-title{
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .type-img{
                margin-right: 22rpx;
                width: 240rpx;
                height: 160rpx;
                img{width:100%;height:100%;border-radius:8rpx;}
            }
            .type-content{
                height: 160rpx;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;

                .type-content-title{
                    flex:1;
                    font-size:36rpx;
                    font-weight:600;
                    color:rgba(14,14,14,1);
                }
                .number{flex:1;font-size:24rpx;color:rgba(153,153,153,1);}
                .present{font-size:24rpx}
            }
        }
        .info{
            .title{
                margin:23rpx 0;
                font-weight:600;
                color:#0E0E0E;
                font-size: 30rpx;
            }
        }
    }

    //推荐视频
    .recommend-video-box{
        padding: 32rpx 33rpx;

        .recommend-video{
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow:auto;
            .video{
                width: 332rpx;
                height: auto;
                font-size:28rpx;
                font-weight:400;
                color:rgba(14,14,14,1);
                box-sizing: border-box;
                margin-right:20rpx;
                .video_text_info{
                    height:80rpx;
                    overflow: hidden;      
                    text-overflow: ellipsis;      
                    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */      
                    -webkit-line-clamp: 4; /* 控制最多显示几行 */      
                    -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
                }
            }
        }
    }

    //学习目录
    .list{
        padding: 32rpx 33rpx 88rpx 33rpx;

        .item{
            width:100%;
            height: 134rpx;
            margin-bottom:36rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size:28rpx;
            color:rgba(14,14,14,1);

            // img{
            //     margin-right: 20rpx;
            //     width:  238rpx;
            //     height: 134rpx;
            //     border-radius: 8rpx;
            // }
            .info{
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;

                .content{flex:1}
                .date{
                    font-size:22rpx;
                    color:rgba(153,153,153,1);
                }
            }
        }
    }

    //立即订阅按钮
    .btn{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 30rpx;
      color: #ffffff;
      background: linear-gradient(0deg,rgba(77,141,249,1),rgba(86,117,254,1));
      box-shadow: 0 2rpx 7rpx 0 rgba(82,127,252,0.48);
    }
}
</style>
